<template>
  <div class="user-inputer">
    <!-- <p>{{ userInput }}</p> -->

    <input
      type="text"
      placeholder="请输入待办事项"
      :value="userInput"
      v-debounce:input="{
        handler: (e) => (userInput = e.target.value),
        delay: 1000,
      }"
    />

    <slot name="actionBtn" :userInput="userInput">
      <!-- 【操作按钮插槽】的默认实现 -->
      <!-- 用户点击时 直接以事件形式 将用户输入的数据提交父组件自己处置 -->
      <button @click="submitUserInput">操作</button>
    </slot>
    
  </div>
</template>

<script setup>
import { ref } from "vue";

const userInput = ref("");

// 声明自定义事件
const emit = defineEmits(["userInputOK"]);
const submitUserInput = (e) => {
  // 发送自定义事件 + 携带任意多个参数
  emit("userInputOK", userInput.value);
};
</script>

<style lang="scss" scoped>
.user-inputer {
  width: 100%;
  height: 35px;
  display: flex;

  input {
    flex: 1;
    height: 100%;
    text-indent: 1rem;
  }

  button {
    width: 100px;
    height: 100%;
    margin-left: 5px;
  }
}
</style>
